<template>
  <div class="is-login">
    <div class="is-login__header flex-ac">
      <span class="is-login__header__title">撰写回答</span>
    </div>
    <div class="is-login__content">
      <span>你尚未登录，登录后可以</span>
      <div class="item">
        <SvgIcon name="dui" color="#fff" />
        <span>和开发者交流问题的细节</span>
      </div>
      <div class="item">
        <SvgIcon name="dui" color="#fff" />
        <span>关注并接收问题和回答的更新提醒</span>
      </div>
      <div class="item">
        <SvgIcon name="dui" color="#fff" />
        <span>参与内容的编辑和改进，让解决方法与时俱进</span>
      </div>
    </div>
    <button class="btn">登录注册</button>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.is-login {
  display: grid;
  grid-template-rows: 60px 1fr;
  background-color: #fff;
  border-radius: 2px;
  padding-bottom: 30px;
  margin-bottom: 20px;

  &__header {
    border-bottom: 1px solid #efefef;
    padding: 0 20px;

    &__title {
      font-size: 18px;
    }
  }

  &__content {
    display: grid;
    gap: 10px;
    padding: 10px 20px;

    .item {
      display: flex;
      align-items: center;
      gap: 10px;
    }
  }

  >button {
    background-color: $color;
    width: max-content;
    margin-left: 20px;

  }
}
</style>